<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="transparent">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" @tap.stop="handleNavBack"
          >&#xe600;</view
        >
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">
          {{ $t("common.title.detailed") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gBody">
      <view class="head">
        <view class="extract-head">
          <view
            class="buttons grace-grids grace-flex-vcenter"
            style="padding:60rpx;"
          >
            <view class="title"
              >{{ parseFloat(log.num) }} {{ log.symbol }}</view
            >
            <view class="time">
              {{ log.created_at | moment("YYYY-MM-DD HH:mm:ss") }}
            </view>
            <view class="grace-nowrap line">
              <view>{{ $t("wallet.logPage.action") }}</view>
              <view class="grace-flex1">{{ log.module }}</view>
            </view>
            <view class="grace-nowrap line">
              <view>{{ $t("wallet.logPage.no") }}</view>
              <view class="grace-flex1">
                {{ log.no }}
                <view class="copy" @tap.stop="handleCopy(log.no)">
                  {{ $t("common.operate.copy") }}
                </view>
              </view>
            </view>
            <view class="grace-nowrap line">
              <view>{{ $t("wallet.logPage.explain") }}</view>
              <view class="grace-flex1">
                {{ log.info }}
                <view class="copy" @tap.stop="handleCopy(log.info)">
                  {{ $t("common.operate.copy") }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      log: null
    };
  },
  computed: {
    ...mapGetters("asset", ["tranferLogs"])
  },
  onLoad(options) {
    let _this = this;
    let data = this.tranferLogs.data;
    data.forEach(item => {
      if (item.id == options.id) {
        _this.log = item;
      }
    });
  }
};
</script>

<style scoped>
.gBody {
  position: absolute;
  top: 0px;
}

.head {
  background: url(~@/static/accets_page_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 200px;
  width: 750rpx;
  position: relative;
  padding-top: 80rpx;
}

.extract-head {
  width: 688rpx;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  margin-top: 60rpx;
}
.extract-head .buttons {
  background-color: #ffffff;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0px 0px 10rpx 0px rgba(51, 51, 51, 0.1);
  border-radius: 20rpx;
}
.title {
  color: #282828;
  font-size: 40rpx;
  width: 100%;
  text-align: center;
  padding-top: 30rpx;
}
.time {
  padding-top: 20rpx;
  text-align: center;
  color: #999999;
  width: 100%;
  padding-bottom: 60rpx;
}
.line {
  width: 100%;
}
.line > view:first-child {
  color: #bbbbbb;
  width: 130rpx;
  padding: 10rpx;
  font-weight: 700;
}
.line > view:last-child {
  color: #999999;
  padding: 10rpx;
}
.copy {
  color: #548bf7;
  margin-left: 10rpx;
  display: inline;
}
</style>
